<template>
    <basic-container>
      <avue-crud
        :option="option"
        :search.sync="search"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @sort-change="sortChange"
      >
        <template slot-scope="{}" slot="rpiNoSearch">
          <select-page
            ref="searchRpiSelect"
            label="rpiName"
            value="rpiNo"
            :select.sync="search.rpiNo"
            :url="website.searchLink.merchantUrl"
            placeholder-text="商户"
            filter-key="searchParam"
          ></select-page>
        </template>
        <template slot-scope="{}" slot="serviceNoSearch">
          <select-page
            ref="searchSerSelect"
            label="serviceName"
            value="serviceNo"
            :select.sync="search.serviceNo"
            :url="website.searchLink.serviceUrl"
            placeholder-text="服务商"
            filter-key="searchParam"
          ></select-page>
        </template>
        <template slot-scope="{}" slot="orgNoSearch">
          <select-page
            ref="searchOrgSelect"
            label="serviceName"
            value="serviceNo"
            :select.sync="search.orgNo"
            :url="website.searchLink.orgUrl"
            placeholder-text="机构"
            filter-key="searchParam"
          ></select-page>
        </template>
      </avue-crud>
    </basic-container>
  </template>
  
    <script>
  import { getTicketList } from "@/api/rb-core/rpiMemberOem/rpi_member_oem";
  import { mapGetters } from "vuex";
  import selectPage from "@/components/select-page/select-page";
  
  export default {
    components: {
      selectPage,
    },
    props: {
    rpiMemberNo: {
      type: String,
      default: "",
    },
  },
    data() {
      return {
        form: {},
        query: {
            useStatus: '1'
        },
        search: {},
        loading: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        selectionList: [],
        statisticsData: {},
        option: {
          height: "calc(50vh - 50px)",
          calcHeight: 30,
          tip: false,
          border: true,
          index: false,
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          selection: false,
          searchMenuSpan: 24,
          columnBtn: false,
          labelWidth: 120, //弹出表单的标题的统一宽度
          searchLabelWidth: 120, //搜索框标题宽度
          menuWidth: 100, //操作栏宽度
          emptyBtnText: "重置",
          menu: false,
          column: [
            {
              label: "发券商户编号",
              prop: "receiveRpiNo",
              type: "input",
              minWidth: 140,
            },
            {
              label: "发券商户名称",
              prop: "receiveRpiName",
              type: "input",
              minWidth: 140,
            },
            {
              label: "核券商户编号",
              prop: "rpiNo",
              type: "input",
              minWidth: 140,
            },
            {
              label: "核券商户名称",
              prop: "rpiName",
              type: "input",
              minWidth: 140,
            },
            {
              label: "会员编号",
              prop: "memberNo",
              type: "input",
              minWidth: 140,
            },
            {
              label: "会员名称",
              prop: "memberName",
              type: "input",
              minWidth: 140,
            },
            {
              label: "订单号",
              prop: "rptOrderCode",
              type: "input",
              minWidth: 140,
            },
            {
              label: "交易方式",
              prop: "rechargeTypeName",
              type: "input",
              minWidth: 120,
            },
            {
              label: "订单金额",
              prop: "rptAmount",
              type: "input",
              minWidth: 140,
            },
            {
                label: "优惠金额",
                prop: "discountAmount",
                type: 'input',
                minWidth: 140,
            },
            {
              label: "实付金额",
              prop: "realAmount",
              type: "input",
              minWidth: 140,
            },
            {
              label: "活动编号",
              prop: "ticketCode",
              type: "input",
              minWidth: 120,
            },
            {
              label: "活动名称",
              prop: "ticketName",
              type: "input",
              minWidth: 120,
            },
            {
              label: "优惠券编号",
              prop: "ticketRecordCode",
              type: "input",
              minWidth: 120,
            },
            {
                label: "交易日期",
                prop: "useTime",
                type: "input",
                minWidth: 140
            }
          ],
        },
        data: [],
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          viewBtn: this.vaildData(this.permission.summaryOfCashback_view, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      exhibition() {
        return (val) => {
          if (val == "" || val == "-1") {
            return (val = 0);
          } else {
            return val;
          }
        };
      },
    },
    watch: {
      rpiMemberNo: {
        handler(val) {
            if (val) {
            this.query.rpiMemberNo = val;
            this.onLoad(this.page);
            }
        },
        immediate: true,
        },
    },
    methods: {
      /**
       * @func edit,view 打开之前回调
       * @desc 点击获取点击天数时间
       * */
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          // getDetail(this.form.id).then(res => {
          //   this.form = res.data.data;
          // });
        }
        done();
      },
      /**
       * @func 重置
       * @desc 重置查询条件
       * */
      searchReset() {
        this.query = {};
        this.search = {};
        this.onLoad(this.page);
      },
      /**
       * @func 搜索
       * @desc 根据条件查询
       * @param {params} params --- 条件查询
       * */
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      /**
       * @func 选中单元格
       * @desc 选中单元格数据
       * @param {list} list --- 选中单元格数据-数组
       * */
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      /**
       * @func 分页页码
       * @desc 分页页码改变时会触发
       * */
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
        // this.refreshChange();
        this.onLoad(this.page, this.query);
      },
      /**
       * @func 当前页个数
       * @desc pageSize改变时会触发
       * */
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        // this.refreshChange();
        this.onLoad(this.page, this.query);
      },
      /**
       * @func 刷新
       * @desc 点击刷新按钮触发该事件
       * */
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      /**
       * @func 初始化
       * @desc 表格初始化查询数据
       * */
      onLoad(page, params = {}) {
        this.loading = true;
        let paramObj = Object.assign(params, this.query);
        getTicketList(page.currentPage, page.pageSize, paramObj).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      /**
       * @func 导出
       * @desc 根据条件导出
       * */
      handleExport() {
        let paramObj = this.query;
        this.$confirm("是否导出用户数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          getExport(paramObj).then((res) => {
              downloadFileExcel(res);
            },
            (error) => {
              window.console.log(error);
            }
          );
        });
      },
      /**
       * @func 排序
       * @desc 根据表格字段排序
       * */
      sortChange(val) {
        if (val.order == "ascending") {
          //正序
          this.query.ascs = val.prop;
          this.query.descs = "";
        } else {
          //倒序
          this.query.descs = val.prop;
          this.query.ascs = "";
        }
        this.refreshChange();
      },
    },
  };
  </script>
  
    <style lang="scss" scoped>
  .curd-foter {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .redFontBox {
    margin-right: 40px;
    .redFont {
      color: red;
    }
  }
  /deep/ .el-tag--dark.el-tag--success {
    border: none !important;
  }
  </style>
  